function CustomersComponent(template,modal){
    this.model=null;
    this.template=template;
    this.addCustomer=function(customer){
        j.ajax("POST","user/add/asyn",customer,{"Content-Type":"application/json"},this,function(customer){
            this.model.push(customer);
            _render(this.model);
        });
    };
    this.updateCustomer=function(user){
        j.ajax("PUT","user/update/asyn",user,{"Content-Type":"application/json"},this,function(m){
            this.model=this.model.filter(function(item){
                return item.id!=user.id;
            });
            this.model.push(user)
            $('#myModal').modal('hide');
            _render( this.model);
        });

    };
    this.findAllCustomers=function(){
        j.ajax("GET","user/all/asyn",null,null,this,function(customers){
            this.model=customers;
            _render(this.model);
        });

    };
    function _render(data){
        template.empty();
        data.forEach(function(item){
            $("<tr>").append($("<td/>").text(item.id))
                .append($("<td/>").text(item.uname))
                .append($("<td/>").text(item.sex))
                .append($("<td/>").text(item.age))
                .append($("<td/>").text(item.sal))
                .append($("<td/>").text(format.dateFormat(item.birth)))
                .append($("<td/>").append($("<button/>").text("delete").addClass("btn").addClass("btn-danger").data(item)))
                .append($("<td/>").append($("<button/>").text("update").addClass("btn").addClass("btn-primary").data(item)))
                .appendTo(template);
        });
        $("button:contains(delete)").on("click",function(){
            $this=$(this);
            j.ajax("DELETE","/user/delete/"+$this.data().id,null,null,this,function(m){
                data=data.filter(function(item){
                    return item.id!=$this.data().id;
                });
                _render(data);
            });

        });
        $("button:contains(update)").on("click",function(){
            $this=$(this);
            var user = $this.data();
            $("input[name=updateId]").val(user.id);
            $("input[name=updateUname]").val(user.uname);
            $("input[name=updateSex][value='true']").removeAttr("checked");
            $("input[name=updateSex][value='false']").removeAttr("checked");

            //版本不能用attr
            $("input[name=updateSex][value='" + user.sex + "']").prop("checked", "checked");
            $("input[name=updateAge]").val(user.age);
            $("input[name=updateSal]").val(user.sal);
            $("input[name=updateBirth]").val(format.dateFormat(user.birth));
            $('#myModal').modal('show');


        });

    }

}

$(function(){
    var c=new CustomersComponent($("tbody"));
    c.findAllCustomers();
    $("#add").on("click",function(e){
        var uname = $("input[name=uname]").val();
        var age = $("input[name=age]").val();
        var sex = $("input[name=sex]:checked").val();
        var sal = $("input[name=sal]").val();
        var birth = $("input[name=birth]").val();
        var user = {uname: uname, age: age, sex: sex, sal: sal, birth: birth};
        c.addCustomer(user);
    })

    $("#updateUser").click(function () {
        var id = $("input[name=updateId]").val();
        var uname = $("input[name=updateUname]").val();
        var sex = $("input[name=updateSex]:checked").val();
        var age = $("input[name=updateAge]").val();
        var sal = $("input[name=updateSal]").val();
        var birth = $("input[name=updateBirth]").val();
        var user = {id: id, uname: uname, age: age, sex: sex, sal: sal, birth: birth};
        c.updateCustomer(user);

        console.log(user);
    })





})
